import React, { useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import Router from '@/utils/router'
import { fetchListGoodsByIds } from '@/server/shop'
import './index.scss'
const ShopList = (props) => {
    const { } = props
    const list = Taro.getStorageSync("shopList");
    const [renderList, setRenderList] = useState([])
    useEffect(() => {
        if (list.length > 0) {
            fetchList(list.map(item => {
                return item.id
            }).toString())
        }
    }, [list.length])
    const fetchList = goodsIds => {
        fetchListGoodsByIds({
            goodsIds: goodsIds
        }).then(val => {
            const { goodsList } = val
            setRenderList(goodsList)
        })
    }
    return <View style={{ background: '#ffffff', padding: `0 ${Taro.pxTransform(24)}` }} className='wxPage_shop_style2'>
        <View className='list-style-list'>
            {renderList.map(val => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.id
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: '100%', objectFit: 'cover' }} mode='aspectFill' src={cover}></Image>
                    </View>
                    <View className='item-info'>
                        <View className='item-info-title'>{goodsName}</View>
                        <View className='item-info-desc'>{goodsDesc}</View>
                        <View className='item-price'>
                            <View style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</View>
                            {oriPrice && <View className='item-price-old'>¥{oriPrice}</View>}
                        </View>
                    </View>
                </View>
            })}
        </View>
    </View>
}
export default ShopList